<template>
  <div class="app-container">
    <el-row>
      <div class="action">
        <div class="chart-filter">
          <div class="filter-right">
            <label>公众号：</label>
            <el-input type="text"  size="medium " v-model="listQuery.publicName" class="w-200"  placeholder="请输入公众号名称"></el-input>
            <label>门店：</label>
            <el-input type="text"  size="medium " v-model="listQuery.shopName" class="w-200"  placeholder="请输入门店名称"></el-input>
            <label>订单状态：</label>
            <el-select size="small" class="w-150" v-model="listQuery.status" filterable placeholder="请选择订单状态">
              <el-option v-for="item in  orderStatusOptions" :key="item.status" :label="item.val" :value="item.status">
              </el-option>
            </el-select><br/>
            <el-row style="margin-top: 20px;">
              <label>查询时间：</label>
              <el-date-picker
                v-model="date_pick_date"
                :editable="false"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :picker-options="pickerOptions"
                @change="handleDatePickChange"
              >
              </el-date-picker>
              <el-button type="info" class="btn-query" size="small" @click='handleFilter'>查询</el-button>
            </el-row>
          </div>
        </div>
        <el-table :data="list"  element-loading-text="Loading" :header-cell-style="{ backgroundColor:'#f5f6f6' }"  fit highlight-current-row>
          <el-table-column label='订单编号' align="center">
            <template slot-scope="scope">
              {{scope.row.Forder_no}}
            </template>
          </el-table-column>
          <el-table-column label='下单时间' align="center">
            <template slot-scope="scope">
              {{scope.row.Fcreate_time}}
            </template>
          </el-table-column>
          <el-table-column label="公众号" align="center">
            <template slot-scope="scope">
              {{scope.row.Fpublic_name}}
            </template>
          </el-table-column>
          <el-table-column label="门店" align="center">
            <template slot-scope="scope">
              {{scope.row.Fshop_name}}
            </template>
          </el-table-column>
          <el-table-column label="已完成量/投放量" align="center">
            <template slot-scope="scope">
              {{scope.row.used}}/ {{scope.row.Fcount}}
            </template>
          </el-table-column>
          <el-table-column label="粉丝单价" align="center">
            <template slot-scope="scope">
              {{scope.row.phone}}
            </template>
          </el-table-column>
          <el-table-column label="投放天" align="center">
            <template slot-scope="scope">
              {{scope.row.Fdays}}
            </template>
          </el-table-column>
          <el-table-column label="开始投放时间" align="center">
            <template slot-scope="scope">
              {{scope.row.Fstart_time}}
            </template>
          </el-table-column>
          <el-table-column label="粉丝性别" align="center">
            <template slot-scope="scope">
              {{scope.row.Fsex}}
            </template>
          </el-table-column>
          <el-table-column label="粉丝终端" align="center">
            <template slot-scope="scope">
              {{scope.row.Fterminal}}
            </template>
          </el-table-column>
          <el-table-column label="地域" align="center">
            <template slot-scope="scope">
              {{scope.row.Farea}}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center">
            <template slot-scope="scope">
              {{scope.row.state}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <a v-if=" scope.row.Fstatus==1" href="javascript:;" @click="orderCancel(scope.row.Fid)">取消订单</a>
              <a v-if="scope.row.Fstatus==0" href="javascript:;" @click="handlefailedReason(scope.row.Freason)">未通过原因</a>
              <router-link v-if="scope.row.Fstatus==2 || scope.row.Fstatus==3 || scope.row.Fstatus==4 || scope.row.Fstatus==5"  class="link-type" :to="'/orderlist/fanslist/'+scope.row.Fid">
                <a href="javascript:;" >粉丝</a>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-row>
    <el-dialog
      title="未通过原因"
      :visible.sync="showDialog"
      width="18%"
      center>
      <el-row class="re-dialog-desc">
        <div>{{reason}}</div><br/>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import ajax from '@/utils/ajax'
  import { parseTime } from '@/utils'

  export default {
    name: 'orderlist',
    data() {
      return {
        wxinfoOptions: [],
        shopOptions: [],
        showDialog: false,
        orderStatusOptions: [],
        list: [],
        total: null,
        listLoading: true,
        listQuery: {
          publicName: '',
          shopName: '',
          startTime: '',
          endTime: '',
          status: '',
          page: 1,
          pageSize: 20
        },
        reason: '',
        date_pick_date: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleDatePickChange() {
        if (this.date_pick_date) {
          this.listQuery.startTime = parseTime(new Date(this.date_pick_date[0]), '{y}-{m}-{d} {h}:{i}:{s}')
          this.listQuery.endTime = parseTime(new Date(this.date_pick_date[1]), '{y}-{m}-{d} {h}:{i}:{s}')
        }
      },
      handlefailedReason(str) {
        this.showDialog = true
        this.reason = str
      },
      getList() {
        const self = this
        ajax.getData(process.env.BASE_API + '/orders', this.listQuery).then(function(res) {
          if (res.errCode === 0) {
            self.list = res.data.data
            self.total = res.data.total
            self.orderStatusOptions = res.data.statusData
          }
        })
      },
      handleFilter() {
        this.getList()
      },
      orderCancel(order_id) {
        const data = {}
        data.id = order_id
        const self = this
        ajax.postData(process.env.BASE_API + '/orders/cancel', data).then(function(response) {
          if (response.errCode === 0) {
            self.$message({
              type: 'success',
              message: '订单取消成功!'
            })
            setTimeout(() => {
              self.getList()
            }, 3 * 1000)
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .w-200{
    width: 15% !important;
  }
  .action {
    a{
      color: #2b6be5
    }
  }
  .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f9f9f9;
    text-align: left;
  }
  .el-dialog__body {
    text-align: initial;
    padding: 0 60px 30px;
  }
  .el-dialog {
    border-radius: 0px;
  }
  .re-dialog-desc{
    text-align: center;
    font-size: 18px;
    margin: 20px 0 20px 0;
    color: #333333;
  }
</style>
